<template>
  <div >
      <button class="btn btn-info" @click="edit(resource_id)" >修改</button>
      <button class="btn btn-danger" @click="delDialog = true">删除</button>
    <!--@click="edit(resource_id)"-->


    <el-dialog
      title="提示"
      :visible.sync="delDialog"
      width="30%">
      <p class="text-center">确认删除</p>
      <span slot="footer" class="dialog-footer">
          <el-button @click="delDialog = false">取 消</el-button>
          <el-button type="primary" @click="del(resource_id)">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="editDialog" width="50%" v-if="this.$store.state.token">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="资源名称">
          <el-input placeholder="资源名称" v-model="title"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-select  v-model="tag">
            <el-option  :value="item.id" :key="item.id" v-for="item in this.$store.state.tagList" :label="item.tag"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载地址">
          <el-input placeholder="下载地址" v-model="url"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="备注" v-model="remark"></el-input>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" >
          <el-button type="primary" @click="put" >确认</el-button>
        </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "Voptions",
    data() {
      return {
        delDialog: false,
        editDialog: false,

        date: null,
        id: null,
        title: null,
        tag: null,
        url: null,
        remark: null,


      }
    },

    methods: {
      del: function (resource_id) {

        this.$store.commit("delResource", resource_id);
        this.delDialog = false

      },
      edit: function (resource_id) {

        this.editDialog = true
        for (var i = 0; i < this.$store.state.resourceData.length; i++) {
          if (this.$store.state.resourceData[i].id === resource_id) {
            this.title = this.$store.state.resourceData[i].title
            for (var k = 0; k < this.$store.state.tagList.length; k++) {
              if (this.$store.state.resourceData[i].tag === this.$store.state.tagList[k].tag) {
                this.tag = this.$store.state.tagList[k].id
              }
            }
            this.url = this.$store.state.resourceData[i].url
            this.remark = this.$store.state.resourceData[i].remark
            this.id = this.$store.state.resourceData[i].id
            this.date = this.$store.state.resourceData[i].date
            // console.log(this.$store.state.resourceData[i].id)
            // console.log(this.$store.state.resourceData[i].date)
          }
        }
      },
      put: function () {
        this.$axios.request({
          url: this.$store.state.ip + "resource/" + this.id,
          method: "PUT",
          data: {
            title: this.title,
            tag: this.tag,
            url: this.url,
            remark: this.remark,
            user: Number(this.$store.state.user_id),
            date: this.date,
          },
          params:{
            token:this.$store.state.token
          }
        }).then((data) => {
          // console.log(data.data.resource)

          for (var i = 0; i < this.$store.state.resourceData.length; i++) {
            if (this.$store.state.resourceData[i].id === this.id) {
              // this.$store.state.resourceData[i].title=this.title,
              for (var k = 0; k < this.$store.state.tagList.length; k++) {
                if (this.tag === this.$store.state.tagList[k].id) {
                  this.$store.state.resourceData[i].tag = this.$store.state.tagList[k].tag
                }

                this.$store.state.resourceData[i].url = this.url;
                this.$store.state.resourceData[i].remark = this.remark;
                this.$store.state.resourceData[i].title = this.title;
                // console.log(this.$store.state.resourceData[i])
              }
              // data.data.resource.tag=this.$store.state.tagList[i].tag
              // this.$store.state.resourceData.unshift(data.data.resource)
            }
          }
          this.editDialog = false
        })
      },

    },

    props: ["resource_id",]

  }
</script>

<style scoped>

</style>
